<template>
	<div style="background-color: #000;min-height: 100vh;">
		<div style="min-height: 8em;color: #fff;width: 100%;position: relative;background-color: #808080;">
			<div><image src="/static/imgs/car.png" style="width: 100%;" mode="widthFix"></image></div>
			<div style="position: absolute;top:1.0em;left: 1.5em;font-size: 1.5em;">质保查询</div>
		</div>
		<div class="serchDiv" style="margin-top: -1.5em;z-index: 100;position: relative;">
			<div style="width: 72%;"><input type="text" v-model="quPhone"
					style="width: 100%; border: 1px solid #ccc;height: 1.5em;" placeholder="按手机号/车牌号查询" /></div>
			<div style="width: 2%;"></div>
			<div style="width: 24%;">
				<button class="serchbt" style="background-color: #A3A3A3;" @click="serch">查询</button>
			</div>
		</div>
	
		<div style="margin-left: 0.5em;margin-right: 0.5em;">
	
			<div style="font-size: 0.8em;color: #fff;padding-bottom: 5em;">
				<template v-for="(item,index) in objs" :key="index">
					<div style="background-color: #E2E2E2;padding: 0.7em;margin-top: 0.8em; color: #1f1f1f;">
						<div style="border-bottom: 1px solid #ccc;padding-bottom: 0.3em;margin-bottom: 0.3em;">
							<div style="float: left;color:#1f1f1f ;">质保编号：{{item.quQualityNum}}</div>
							<div style="float: right;"></div>
							<div class="clear"></div>
						</div>
						<div style="font-size: 1.1em;color: #1f1f1f">
							<div>{{item.quLicencePlate}}-{{item.quPhone}}</div>
							<div style="margin-top: 0.3em;">
								<template v-if="item.quTypeId==100">
									漆面膜
								</template>
								<template v-else-if="item.quTypeId==101">
									改色膜
								</template>
								<template v-else-if="item.quTypeId==102">
									太阳膜
								</template>
							</div>
							<div style="margin-top: 0.3em;">
								施工时间：
								<uni-dateformat :date="item.creatTime" format="yyyy-MM-dd"></uni-dateformat>
							</div>
							<div>
								<div class="detailsBt" @click="toDetails(item)">查看详情</div>
								<div class="clear"></div>
							</div>
						</div>
					</div>
				</template>
			</div>
		</div>
	</div>

	<CustomTabbar ref="customTabbar"></CustomTabbar>
</template>

<script setup>
	import api from '@/common/httprequest.js'
	import {
		onMounted,
		reactive,
		ref
	} from 'vue'

	import CustomTabbar from '@/component/custom-tabbar.vue'
	
	let objs = reactive([]);
	let currentTab = ref(0);
	let tabbarList = ['未使用', '已使用'];
	let quPhone = ref(null);


	const loadData = () => {
		if (quPhone.value == null || quPhone.value.trim().length == 0) {
			return;
		}
		objs.splice(0, objs.length);
		uni.showLoading({
			title: '数据处理中...'
		});
		api.request({
			method: "post",
			url: "/app/guarantee/guaranteeMsg",
			params: {
				'quPhone': quPhone.value
			},
		}).then(res => {
			uni.hideLoading();
			console.log('aaaaresaa', res);

			if (res.code == 200) {
				var list = res.data;
				if (list.length == 0) {
					uni.showToast({
						title: '没有更多数据!',
						icon: null,
						duration: 2000
					})
					return;
				}
				objs.push(...list);
				//console.log('objs', objs);
			} else {
				// uni.showToast({
				// 	icon: 'none',
				// 	duration: 2000,
				// 	title: '数据查询失败！'
				// })
			}

		});
	}

	const serch = () => {
		loadData();
	}

	const toDetails = (obj) => {
		var jsonstr = JSON.stringify(obj);
		uni.redirectTo({
			url: '/guarantee/details?obj=' + jsonstr
		})
	}

	onMounted(() => {
		
	})
</script>

<style>
	page{
		background-color: #000;
	}
</style>
<style scoped>
	@import '@/styles/global.css';

	.detailsBt {
		border: 1px solid #ccc;
		padding: 0.3em;
		width: 6em;
		text-align: center;
		float: right;
	}

	.serchDiv {
		display: flex;
		margin: 1.0em;
		padding: 0.5em;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 0.5em;
	}

	.serchbt {
		height: 1.8em;
		line-height: 1.8em;
		background-color: #FB7299;
		color: #fff;
		font-size: 0.9em;
	}

	.toTop {
		position: fixed;
		bottom: 4em;
		right: 0em;
		width: 5em;
		height: 3em;
		text-align: center;
		z-index: 1;
	}

	.scroll-view {
		height: 100vh;
		overflow-y: scroll;
		padding-left: 0.5em;
		padding-right: 0.5em;
		box-sizing: border-box;
	}

	.tabbar {
		margin: 0 auto;
		display: flex;
		background-color: #323232;
	}

	.tabbar-item {
		color: #ccc;
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		border-top: 2px solid #FB7299;
		transition: color 0.3s;
		padding-top: 0.2em;
		padding-bottom: 0.2em;
	}

	.tabbar-item.active {
		color: #FB7299;
	}

	.tabpages {
		padding-left: 0.7em;
		padding-right: 0.7em;
	}

	.clear {
		clear: both;
	}
</style>